<template>
  <div class="lcds-root-container">
    <el-tabs
      v-model="tabsActive"
      tab-position="top"
      class="lc-tabs lc-tabs--default"
      type=""
    >
      <el-tab-pane label="标签-1" name="tab1">
        <TabsPanel01 />
      </el-tab-pane>

      <el-tab-pane label="标签-2" name="tab2">
        <TabsPanel02 />
      </el-tab-pane>
    </el-tabs>
    <div class="lc-form" style="--formItemSpace: 50px; --label-width: 100px">
      <el-form
        ref="formRef"
        :model="formModel"
        :rules="rules"
        :disabled="status === 'preview'"
        label-width="100px"
      >
        <lc-rower> </lc-rower>
      </el-form>
    </div>
    <lc-steps
      v-model="stepsActive"
      head-direction="horizontal"
      head-style="style1"
      :has-index="true"
    >
      <lc-step title="基础信息">
        <StepsPanel01 ref="step" @stepsToNext="handleStepsToNext" />
      </lc-step>

      <lc-step title="高级信息">
        <StepsPanel02
          ref="step"
          @stepsToLast="handleStepsToLast"
          @stepsToSubmit="handleStepsToSubmit"
        />
      </lc-step> </lc-steps
    ><lc-block>
      <lc-rower style="--width: 100%; flex-basis: calc(100% - 0px)"> </lc-rower>
    </lc-block>
    <el-collapse
      v-model="collapseActive"
      class="lc-collapse"
      :accordion="false"
    >
      <el-collapse-item
        title="折叠面板标题"
        :name="0"
        style="--collapse-head-bg-color: "
      >
        <CollapsePanel01 />
      </el-collapse-item>

      <el-collapse-item
        title="折叠面板标题"
        :name="1"
        style="--collapse-head-bg-color: "
      >
        <CollapsePanel02 />
      </el-collapse-item>
    </el-collapse>
    <div
      class="lc-buttonGroup lc-buttonGroup__empty lc-buttonGroup__level lc-buttonGroup__center"
    ></div>
    <el-table
      ref="tableRef"
      class="lc-table"
      :data="tableData"
      :row-key="tableRowKey"
      :stripe="false"
    >
      <template v-for="(col, index) in tableColumns">
        <el-table-column
          v-if="col.showFlag"
          :key="col.prop + '_' + index"
          :prop="col.prop"
          :label="col.label"
          v-bind="col.attrs"
        >
        </el-table-column>
      </template>
    </el-table>
    <lc-narrow-broad>
      <template #side>
        <NarrowBroadside />
      </template>
      <template #main>
        <NarrowBroadmain />
      </template> </lc-narrow-broad
    ><lc-tab-nav v-model="tabNavActive">
      <lc-tab-nav-pane label="标签导航-1" name="标签导航-1_0">
        <TabNavPanel01 />
      </lc-tab-nav-pane>

      <lc-tab-nav-pane label="标签导航-2" name="标签导航-2_1">
        <TabNavPanel02 />
      </lc-tab-nav-pane> </lc-tab-nav
    ><el-card class="lc-card">
      <template #header>
        <div>
          <lc-rower>
            <span
              class="lc-label lc-card__header-title lc-label--overflow lc-re-label--overflow"
            >
            </span>
          </lc-rower>
        </div>
      </template>

      <lc-rower> </lc-rower>
    </el-card>
    <ListFilter
      v-show="filterVisible"
      ref="filterRef"
      @search="handleSearchListView"
    /><lc-editor-table
      v-model="editorTable"
      ref="editorTableRef"
      :columns="editorTableColumns"
      input-width="120px"
      :rowOperates="['add', 'delete']"
      style="--form-input-width: 120px"
    >
      <template #input1="scope">
        <el-input
          class="lc-input"
          v-model="scope.row.input1"
          placeholder="请输入"
        >
        </el-input>
      </template>

      <template #input2="scope">
        <el-input
          class="lc-input"
          v-model="scope.row.input2"
          placeholder="请输入"
        >
        </el-input>
      </template>
    </lc-editor-table>
    <el-timeline class="lc-timeline">
      <el-timeline-item timestamp="2024-12-06" placement="top" type="primary">
        <TimelinePanel01 />
      </el-timeline-item>

      <el-timeline-item timestamp="2024-12-06" placement="top" type="primary">
        <TimelinePanel02 />
      </el-timeline-item>
    </el-timeline>
    <lc-card2>
      <template #header>
        <lc-rower>
          <span class="lc-label"> 标题 </span>
        </lc-rower>
      </template>

      <div>
        <lc-rower> </lc-rower>
      </div>

      <template #footer>
        <div
          class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center"
          style="justify-content: flex-end"
        >
          <el-button class="lc-button" type="primary"> 按钮 </el-button>
          <el-button class="lc-button" type="primary"> 按钮 </el-button>
        </div>
      </template>
    </lc-card2>
    <lc-three-column>
      <template #left>
        <ThreeColumnPanel01 />
      </template>
      <template #middle>
        <ThreeColumnPanel02 />
      </template>
      <template #right>
        <ThreeColumnPanel03 />
      </template>
    </lc-three-column>
    <div class="lc-sheet">
      <table>
        <colgroup>
          <col style="width: 0px" />
          <col style="width: 150px" />
          <col style="width: 150px" />
          <col style="width: 150px" />
          <col style="width: 150px" />
          <col style="width: 150px" />
          <col style="width: 150px" />
        </colgroup>
        <thead></thead>
        <tbody>
          <tr>
            <td style="height: 35px"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td style="height: 35px"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td style="height: 35px"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td style="height: 35px"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <td style="height: 35px"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, unref, computed } from "vue";

import TabsPanel01 from "./components/tabsPanel01/index.vue";
import TabsPanel02 from "./components/tabsPanel02/index.vue";
import { request } from "@/apis/request";
import StepsPanel01 from "./components/stepsPanel01/index.vue";
import StepsPanel02 from "./components/stepsPanel02/index.vue";
import CollapsePanel01 from "./components/collapsePanel01/index.vue";
import CollapsePanel02 from "./components/collapsePanel02/index.vue";
import NarrowBroadside from "./components/narrowBroadside/index.vue";
import NarrowBroadmain from "./components/narrowBroadmain/index.vue";
import TabNavPanel01 from "./components/tabNavPanel01/index.vue";
import TabNavPanel02 from "./components/tabNavPanel02/index.vue";
import ListFilter from "./components/listFilter/index.vue";
import TimelinePanel01 from "./components/timelinePanel01/index.vue";
import TimelinePanel02 from "./components/timelinePanel02/index.vue";
import ThreeColumnPanel01 from "./components/threeColumnPanel01/index.vue";
import ThreeColumnPanel02 from "./components/threeColumnPanel02/index.vue";
import ThreeColumnPanel03 from "./components/threeColumnPanel03/index.vue";
import { sheetFuncLib } from "@hooks/uwdp/sheet";
defineOptions({
  name: "Bj9527",
});

const emit = defineEmits(["submit"]);

const props = defineProps({ status: { type: String, default: "" } });

const tabsActive = ref("tab1");
const formRef = ref(null);
const formModel = ref({});
const loading = ref(false);
const rules = ref({});
const stepsActive = ref(0);
// let formStatus = "add";
const forms = {};
const stepPanels = [];
const collapseActive = ref([0]);
const tableRef = ref(null);
const tableData = ref([]);
const tableColumns = ref([
  { label: "列1", prop: "col1", showFlag: true, attrs: {} },
  { label: "列2", prop: "col2", showFlag: true, attrs: {} },
]);
const tableRowKey = ref("id");
const tabNavActive = ref("标签导航-1_0");
const editorTable = ref([]);
const editorTableColumns = ref([
  { prop: "input1", label: "输入列1", required: false, summary: false },
  { prop: "input2", label: "输入列2", required: false, summary: false },
]);
const editorTableData = ref([]);
const editorTableRef = ref(null);
const searches = new URLSearchParams(document.location.search.substring(1));
const formStatus = props.status || searches.get("status") || "add";

const queryFormData = (queryData = {}) => {
  let params = { url: "", method: "" };
  loading.value = true;
  return request({
    ...params,
    params: {
      ...queryData,
    },
  })
    .then((res = {}) => {
      const data = res.data || {};
      Object.keys(data).forEach((key) => {
        formModel.value[key] = [null, undefined].includes(data[key])
          ? formModel.value[key]
          : data[key];
      });
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleStepsToNext = () => {
  stepsActive.value += 1;
};
const handleStepsToLast = () => {
  stepsActive.value -= 1;
};
const handleStepsReset = () => {
  stepPanels.forEach((stepVm) => {
    stepVm.resetForm && stepVm.resetForm();
  });
};
const handleStepsToSubmit = () => {
  try {
    const data = {};
    Object.keys(forms).forEach((key) => {
      data[key] = forms[key].value;
    });
    handleSubmitForms(data);
  } catch (e) {
    ElMessage.error(e.message);
  }
};
const queryTableData = async () => {
  let params = { url: "", method: "get", params: {} };
  const res = await request(params);
  if (res) {
    tableData.value = res?.data?.data || [];
  }
};

onMounted(() => {
  queryTableData();
});
</script>
